<template>
  <div class="galaxy-user feature-out">
    <div class="filter-container">
      <el-input
        v-model="listQuery.search.configName"
        size="small"
        placeholder="请输入入口名称关键字"
        class="search-item"
      ></el-input>
      <el-select
        v-model="listQuery.search.configType"
        size="small"
        class="search-item"
        placeholder="请选择类型"
      >
        <el-option
          v-for="(item, index) in typeOptions"
          :key="index"
          :value="item.key"
          :label="item.value"
        ></el-option>
      </el-select>
      <el-select
        v-model="listQuery.search.configProductCode"
        size="small"
        class="search-item"
        placeholder="请选择产品"
      >
        <el-option
          v-for="(item, index) in productOptions"
          :key="index"
          :value="item.productCode"
          :label="item.productName"
        ></el-option>
      </el-select>
      <el-select
        v-model="listQuery.search.configChannelCode"
        size="small"
        class="search-item"
        placeholder="请选择渠道"
      >
        <el-option
          v-for="(item, index) in channelOptions"
          :key="index"
          :value="item.channelCode"
          :label="item.channelName"
        ></el-option>
      </el-select>
      <el-select
        v-model="listQuery.search.configStatus"
        size="small"
        class="search-item"
        placeholder="请选择是否启用"
      >
        <el-option value="0" label="禁用"></el-option>
        <el-option value="1" label="启用"></el-option>
      </el-select>
      <span style="display: inline-block">
        <el-button type="primary" size="small" @click="query">查询</el-button>
        <el-button type="primary" size="small" @click="reset">重置</el-button>
      </span>
    </div>
    <div style="text-align: end;margin-bottom: 16px">
      <el-button type="primary" size="small" @click="openDialog('add', '')">
        创建入口
      </el-button>
    </div>
    <el-scrollbar>
      <el-table
        :data="approvalList"
        highlight-current-row
        style="width: 100%;margin-bottom: 12px;"
      >
        <el-table-column
          min-width="160px"
          prop="configCode"
          label="审批入口CODE"
        ></el-table-column>
        <el-table-column
          min-width="160px"
          prop="configName"
          label="审批入口名称"
        ></el-table-column>
        <el-table-column width="100" label="入口类型">
          <template slot-scope="scope">
            {{
              scope.row.configType === 'credit'
                ? '授信'
                : scope.row.configType === 'draw'
                ? '用信'
                : scope.row.configType === 'quota_monitor'
                ? '额度预警'
                : scope.row.configType === 'loan'
                ? '贷中'
                : '贷后'
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="configProductCode"
          label="产品"
          min-width="120"
        ></el-table-column>
        <el-table-column
          min-width="100"
          prop="channelName"
          label="渠道"
        ></el-table-column>
        <el-table-column
          min-width="200"
          prop="configStrategy"
          label="策略"
        ></el-table-column>
        <el-table-column min-width="100" prop="configStatus" label="是否启用">
          <template slot-scope="scope">
            <el-tag
              size="mini"
              :type="scope.row.configStatus === 1 ? 'success' : 'info'"
            >
              {{ scope.row.configStatus === 1 ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column width="200px" label="创建人/修改人">
          <template slot-scope="scope">
            {{
              (scope.row.configCreateUser !== ''
                ? scope.row.configCreateUser
                : '-') +
                '/' +
                (scope.row.configUpdateUser !== ''
                  ? scope.row.configUpdateUser
                  : '-')
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="configValidPeriod"
          width="150px"
          label="审批成功有效天数"
          align="right"
        ></el-table-column>
        <el-table-column
          prop="configFreezePeriod"
          width="150px"
          label="审批拒绝有效天数"
          align="right"
        ></el-table-column>
        <el-table-column
          width="180"
          prop="configCreateAt"
          label="创建时间"
        ></el-table-column>
        <el-table-column
          width="180"
          prop="configUpdateAt"
          label="更新时间"
        ></el-table-column>
        <el-table-column width="120" fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              @click="openDialog('update', scope.row)"
            >
              编辑
            </el-button>

            <el-button
              type="text"
              size="mini"
              @click="deleted(scope.row.configId)"
              slot="reference"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>

    <!-- 弹框 -->
    <el-dialog
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :visible.sync="productDialog"
      :title="dialogTitle"
      class="new-dialog"
      width="576px"
    >
      <el-form
        ref="dialogForm"
        :model="createdItem"
        :rules="rules"
        label-width="160px"
        :status-icon="true"
      >
        <el-form-item prop="configCode" label="审批入口CODE">
          <el-input
            v-model="createdItem.configCode"
            :disabled="dialogType === 'update'"
            placeholder="请输入审批入口CODE"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item prop="configName" label="审批入口名称">
          <el-input
            v-model="createdItem.configName"
            placeholder="请输入审批入口名称"
            size="mini"
          ></el-input>
        </el-form-item>
        <el-form-item prop="configType" label="入口类型">
          <el-select
            v-model="createdItem.configType"
            size="mini"
            style="width:100%"
            placeholder="请选择入口类型"
          >
            <el-option
              v-for="(item, index) in typeOptions"
              :key="index"
              :value="item.key"
              :label="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="configProductCode" label="应用产品">
          <el-select
            v-model="createdItem.configProductCode"
            size="mini"
            style="width:100%"
            placeholder="请选择应用产品"
          >
            <el-option
              v-for="(item, index) in productOptions"
              :key="index"
              :value="item.productCode"
              :label="item.productName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="configChannelCode" label="适用渠道">
          <el-select
            v-model="createdItem.configChannelCode"
            size="mini"
            style="width:100%"
            placeholder="请选择渠道"
          >
            <el-option
              v-for="(item, index) in channelOptions"
              :key="index"
              :value="item.channelCode"
              :label="item.channelName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="configProjectName" label="决策项目">
          <el-select
            v-model="createdItem.configProjectName"
            size="mini"
            style="width:100%"
            @change="configProjectNameChange"
            placeholder="请选择决策项目"
          >
            <el-option
              v-for="(item, index) in projectOptions"
              :key="index"
              :value="item"
              :label="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="configPackageName" label="应用策略">
          <el-select
            v-model="createdItem.configPackageName"
            :disabled="!createdItem.configProjectName"
            size="mini"
            style="width:100%"
            placeholder="请选择应用策略"
          >
            <el-option
              v-for="(item, index) in packageOptions"
              :key="index"
              :value="item"
              :label="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审批成功有效天数">
          <el-input-number
            v-model="createdItem.configValidPeriod"
            controls-position="right"
            :step="10"
            style="width: 100%"
            size="small"
            :precision="0"
            :min="0"
            :max="10000000"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="审批拒绝有效天数">
          <el-input-number
            v-model="createdItem.configFreezePeriod"
            controls-position="right"
            :step="10"
            size="small"
            style="width: 100%"
            :precision="0"
            :min="0"
            :max="10000000"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch
            v-model="createdItem.configStatus"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="productDialog = false">取消</el-button>
        <el-button
          size="mini"
          type="primary"
          v-loading="btnLoading"
          @click="save()"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import { Form } from 'element-ui'
import {
  getList,
  create,
  update,
  del,
  allProduct,
  allChannel,
  getType,
  allPackage,
  allProject
} from '@/api/risksystem/trustTrial/approval'
@Component({
  name: 'channel'
})
export default class extends Vue {
  private listQuery: any = {
    search: {
      configName: null,
      configType: null,
      configProductCode: null,
      configChannelCode: null,
      configStatus: null
    },
    limit: 10,
    page: 1
  }
  private dialogType: any = ''
  private approvalList: any = []
  private productOptions: any = []
  private channelOptions: any = []
  private typeOptions: any = []
  private packageOptions: any = []
  private projectOptions: any = []
  private productDialog = false
  private dialogTitle = ''
  private btnLoading: any = false
  private visible: any = false
  private total: number = 0
  created() {
    this.getList()
    this.product()
    this.channel()
    this.getType()
    this.allProject()
  }
  mounted() {
    //mounted 钩子
  }
  // 弹框校验
  private code: Function = (rule: any, value: any, callback: Function) => {
    let reg = /^[a-zA-Z0-9_-]{1,40}$/
    if (reg.test(value) === false) {
      callback(new Error('仅限英文、数字及下划线且低于40个字符'))
    } else {
      callback()
    }
  }
  private delKong(val: any) {
    this.$set(this.createdItem, val, this.createdItem[val].replace(/\s+/g, ''))
  }
  private createdItem: any = {
    configCode: null,
    configName: null,
    configType: null,
    configProductCode: null,
    configChannelCode: null,
    configProjectName: null,
    configPackageName: null,
    configValidPeriod: 0,
    configFreezePeriod: 0,
    configStatus: 1
  }
  private rules: any = {
    configCode: [
      { required: true, message: '请填写审批入口code', trigger: 'blur' },
      { validator: this.code, trigger: 'blur' }
    ],
    configName: [
      { required: true, message: '请填写审批入口name', trigger: 'blur' }
    ],
    configType: [
      { required: true, message: '请选择入口类型', trigger: 'blur' }
    ],
    configProductCode: [
      { required: true, message: '请选择应用产品', trigger: 'blur' }
    ],
    configChannelCode: [
      { required: true, message: '请选择适用渠道', trigger: 'blur' }
    ],
    configProjectName: [
      { required: true, message: '请选择决策项目', trigger: 'blur' }
    ],
    configPackageName: [
      { required: true, message: '请选择应用策略', trigger: 'blur' }
    ]
  }
  // 列表
  private async getList() {
    const { data } = await getList(this.listQuery)
    this.approvalList = data.list
    this.total = data.total
    console.log(data)
    console.log(this.listQuery)
  }
  // 查询
  private query() {
    this.getList()
  }
  // 重置
  private reset() {
    this.listQuery = {
      search: {
        configName: null,
        configType: null,
        configProductCode: null,
        configChannelCode: null,
        configStatus: null
      },
      limit: 10,
      page: 1
    }
    this.getList()
  }
  // 创建/新增
  private openDialog(type: any, val: any) {
    this.productDialog = true
    this.$nextTick(() => {
      ;(this.$refs['dialogForm'] as Form).clearValidate()
    })
    this.createdItem = {
      configCode: null,
      configName: null,
      configType: null,
      configProductCode: null,
      configChannelCode: null,
      configProjectName: null,
      configPackageName: null,
      configValidPeriod: 0,
      configFreezePeriod: 0,
      configStatus: 1
    }
    this.getList()
    if (type === 'add') {
      this.dialogType = 'add'
      this.dialogTitle = '创建入口'
    } else {
      this.dialogType = 'update'
      this.dialogTitle = '编辑入口'
      this.createdItem = val
    }
  }
  // 保存产品
  private save() {
    ;(this.$refs['dialogForm'] as Form).validate(async valid => {
      if (valid) {
        this.btnLoading = true
        if (this.dialogTitle === '创建入口') {
          this.create()
        } else {
          this.update()
        }
        this.getList()
      }
    })
  }
  private async create() {
    try {
      const { data } = await create(this.createdItem)
      this.$message.success('创建成功！')
      this.productDialog = false
    } finally {
      //
      this.getList()
      this.btnLoading = false
    }
  }
  private async update() {
    try {
      const { data } = await update(this.createdItem)
      this.$message.success('编辑成功！')
      this.productDialog = false
    } finally {
      //
      this.getList()
      this.btnLoading = false
    }
  }
  private deleted(val: any) {
    this.$confirm('确定删除本审批入口?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        this.del(val)
      })
      .catch(() => {})
  }
  // 删除
  private async del(val: any) {
    try {
      const { data } = await del({ configId: val })
      this.$message.success('删除成功！')
    } finally {
      this.getList()
      console.log(val)
    }
  }

  private async product() {
    const { data } = await allProduct()
    this.productOptions = data
  }
  private async channel() {
    const { data } = await allChannel()
    this.channelOptions = data
  }
  private async getType() {
    const { data } = await getType()
    this.typeOptions = data
  }
  private async allPackage(val: any) {
    const { data } = await allPackage({ projectName: val })
    this.packageOptions = data
  }
  private async allProject() {
    const { data } = await allProject()
    this.projectOptions = data
  }

  private getName(key: any, data: any) {
    data.forEach((item: any) => {
      console.log(item.configProductCode)
    })
  }
  private configProjectNameChange(val: any, node: any) {
    console.log(val, node)
    this.allPackage(val)
    this.createdItem.configPackageName = ''
  }
}
</script>
